<template>
  <div style="height: 100%;" class="ElectronicData ElectronicDataBox">
    <el-card :body-style="{ padding: '20px'}" class="el-card-top el-card-tops el-card-user">
      <div slot="header" class="clearfix">
        <span class="el-card-header">电子证照</span>
      </div>
      <el-row>
        <el-col :span="22">
          <el-tabs v-model="activeName" @tab-click="handleActiveClick">
            <el-tab-pane label="业务办理资料" name="bizData">
              <el-row>
                <div style="margin-top: 8px">
                  <el-radio-group v-for="item in fileDefNameList" :key="item.value" @change="handleFileDefNameChange(item.label,item.value)"
                    v-model="fileDefKey" size="mini">
                    <el-badge  :value="data[item.value].fileList.length" class="item">
                      <el-radio-button  class="el-radio-itemBt" :label="item.value">{{item.label}}</el-radio-button>
                    </el-badge>
                  </el-radio-group>
                </div>
              </el-row>
            </el-tab-pane>
            <el-tab-pane label="现场受理资料" name="sceneData">
              <div style="margin-top: 8px; ">
                <el-row>
                  <el-radio-group size="mini" v-for="item in sceneNameList" :key="item.value" @change="handleFileDefNameChange(item.label,item.value)"
                    v-model="fileDefKey">
                    <el-badge :value="data[item.value].fileList.length" class="item">
                      <el-radio-button  class="el-radio-itemBt" :label="item.value">{{item.label}}</el-radio-button>
                    </el-badge>
                  </el-radio-group>
                </el-row>
              </div>
            </el-tab-pane>
          </el-tabs>
          <el-row style="margin-top: 28px; ">
            <ul class="upload-listUL">
              <li class="upload-list-item" v-for="(e,index) in data[fileDefKey].fileList" :key="e.fileId">
                <img class="upload-list-itemImg" :src="e.url" alt="">
                <div class="upload-list-itemBot">
                  <span class="upload-list-itemBotName">{{e.fileDefName}}</span>
                  <span class="upload-list-itemBotTime">{{e.time}}</span>
                </div>
              <div v-if="!view" class="upload-list-itemDel" @click="deletePhoto(index)">
                <i class="el-icon-delete"></i>
              </div>
              </li>
              <li class="upload-list-add" v-if="!view" @click="openCamera">
                +
              </li>
            </ul>
          </el-row>
        </el-col>
        <el-col v-if="!view" :span="2">
          <el-button style="margin-left:16px;" type="primary" size="small" @click="getHistoryData">查看照片</el-button>
        </el-col>
      </el-row>
    </el-card>
    <!--资料采集-->
    <el-dialog title="资料采集" :visible.sync="dialogCameraVisible" >
      <div class="dialogBox-Main">
        <high-scanner @transPic="getPicFilePath" :shighScanner="ShighScanner" :point="point" ref="photoHighScanner"></high-scanner>
          <el-tabs v-model="activeName" @tab-click="handleActiveClick">
            <el-tab-pane label="业务办理资料" name="bizData">
              <el-row>
                <div style="margin-top: 8px">
                  <el-radio-group v-for="item in fileDefNameList" :key="item.value" @change="handleFileDefNameChange(item.label,item.value)"
                    v-model="fileDefKey" size="mini">
                    <el-badge  :value="data[item.value].fileList.length" class="item">
                      <el-radio-button  class="el-radio-itemBt" :label="item.value">{{item.label}}</el-radio-button>
                    </el-badge>
                  </el-radio-group>
                </div>
              </el-row>
            </el-tab-pane>
            <el-tab-pane label="现场受理资料" name="sceneData">
              <el-row>
                <div style="margin-top: 8px">
                  <el-radio-group size="mini" v-for="item in sceneNameList" :key="item.value" @change="handleFileDefNameChange(item.label,item.value)"
                  v-model="fileDefKey">
                  <el-badge :value="data[item.value].fileList.length" class="item">
                  <el-radio-button class="el-radio-itemBt" :label="item.value">{{item.label}}</el-radio-button>
                  </el-badge>
                  </el-radio-group>
                </div>
              </el-row>
            </el-tab-pane>
        </el-tabs>
        <el-row style="margin-top: 5px;" class="upload-list">
          <ul class="upload-listUL">
            <li class="upload-list-item-sub" v-for="(e,index) in data[fileDefKey].fileList" :key="e.fileId" style="width: 120px; height:100px;">
              <img class="upload-list-itemImg" :src="e.url" alt="">
              <div class="upload-list-itemBot">
              <span class="upload-list-itemBotName">{{e.fileDefName}}</span>
              <span class="upload-list-itemBotTime">{{e.time}}</span>
              </div>
                <div v-if="!view" class="upload-list-itemDel" @click.stop="deletePhoto(index)">
                  <i class="el-icon-delete"></i>
                </div>
            </li>
          </ul>
        </el-row>
        <div class="dialog-footer">
          <el-button type="success" plain @click="dialogCameraVisible = false">确定</el-button>
        </div>
        
      </div>
    </el-dialog>
    <!--历史照片-->
    <el-dialog title="历史资料" :visible.sync="dialogHistoryDataVisible" width="60%">
      <div class="dialogBox-Main">
        <ul class="upload-listUL">
          <li class="upload-list-item" v-for="e in historyData" :key="e.fileId">
            <img class="upload-list-itemImg" :src="e.url" alt="">
            <div class="upload-list-itemBot">
              <span class="upload-list-itemBotName">{{e.fileDefName}}</span>
              <!-- <span class="upload-list-itemBotTime">{{e.time}}</span> -->
              <!-- <span class="upload-list-itemBotTime">{{e.selected}}</span> -->
            </div>
            <div class="upload-list-itemDel" @click="handleSelectHistoryData(e)">
              <i class="el-icon-success" :class="{'el-icon-successfalse':e.selected}"></i>
            </div>
          </li>
        </ul>
        <div class="dialog-footer">
          <el-button type="success" plain @click="confirmHistoryData">确定</el-button>
        </div>
      </div>
    </el-dialog>
  </div>
</template>
<script>
  import { getToken } from "@/utils/auth";
  import HighScanner from "@/components/HighScanner";
  import { queryFiles } from "@/api/approval";

  export default {
    data() {
      return {
        ShighScanner: "ElectronicData",
        baseURL: process.env.BASE_API,
        uploadURL: process.env.BASE_API + "/file/upload",
        downloadURL: process.env.BASE_API + "/file/",
        activeName: "bizData",
        fileDefKey: null,
        fileDefName: null,
        point: "h",
        headers: {
          "X-Token": getToken()
        },
        dialogCameraVisible: false,
        dialogHistoryDataVisible: false,
        dataList: [],
        historyData: [],
        data: {
          "": {
            lable: null,
            fileList: []
          }
        },
        sceneNameList: [
          {
            label: "办理人照片",
            value: "scene"
          },
          {
            label: "申请人身份证照片",
            value: "applicant"
          },
          {
            label: "代办人身份证照片",
            value: "agent"
          }
        ],
        fileTemp: {
          fileDefKey: null, //资料的key
          fileDefName: null, //资料类型名称
          fileName: null, // 在业务中的文件名
          fileId: null //文件存储ID
        }
      };
    },
    components: {
      HighScanner
    },
    props: ["fileDefNameList", "files", "photos", "view", "idCardInfo"],
    created() {
      this.fileDefNameList.forEach(f => {
        this.data[f.value] = {
          label: f.label,
          value: f.value,
          fileList: []
        };
        this.files.forEach(file => {
          if (f.value === file.fileDefKey) {
            file.url = this.downloadURL + file.fileId;
            this.data[f.value].fileList.push(file);
          }
        });
      });
      this.sceneNameList.forEach(s => {
        this.data[s.value] = {
          label: s.label,
          value: s.value,
          fileList: []
        };
        if (this.photos) {
          this.data[s.value].fileList = this.photos[s.value].photosList;
        }
        this.files.forEach(file => {
          file.url = this.downloadURL + file.fileId;
          if (s.value === file.fileDefKey) {
            this.data[s.value].fileList.push(file);
          }
        });
      });
      if (this.photos) {
        this.data["scene"] = {
          lable: "办理人照片",
          value: "scene",
          fileList: this.photos.scene.photosList
        };
      }
      this.fileDefKey = this.fileDefNameList[0].value;
      this.fileDefName = this.fileDefNameList[0].label;
    },
    methods: {
      handleActiveClick(data) {
        if (data.label === "业务办理资料") {
          this.fileDefKey = this.fileDefNameList[0].value;
          this.fileDefName = this.fileDefNameList[0].label;
        }
        if (data.label === "现场受理资料") {
          this.fileDefKey = this.sceneNameList[0].value;
          this.fileDefName = this.sceneNameList[0].label;
        }
      },
      handleFileDefNameChange(label, value) {
        this.fileDefName = label;
        this.fileDefKey = value;
      },
      handleRemove(file, fileList) {
        this.data[this.fileDefKey].fileList = fileList;
      },
      deletePhoto(index) {
        this.data[this.fileDefKey].fileList.splice(index, 1);
        this.$forceUpdate()
      },
      openCamera() {
        this.dialogCameraVisible = true;
        if (this.fileDefKey === "scene") {
          this.point = "v";
        }else{
          this.point = "h";
        }
        console.log(this.point)
        this.$nextTick(() => {
          this.$refs.photoHighScanner.openCamera(this.point)
        })
      },
      getPicFilePath(filePath) {
        var params = {
          "X-Token": getToken()
        };
        var res = JSON.parse(
          this.$refs.photoHighScanner.camera.UploadFile2(
            "file",
            JSON.stringify(params),
            this.uploadURL,
            filePath,
            ""
          )
        );
        var file = {
          url: res.data.url,
          fileId: res.data.fileId,
          fileDefKey: this.fileDefKey,
          fileDefName: this.fileDefName,
          fileName: this.fileDefName + ".jpg"
        };
        this.data[this.fileDefKey].fileList.push(file);
        this.$forceUpdate()
      },
      handleClose() {
        this.dialogCameraVisible = false;
      },
      toStorage() {
        this.files.splice(0, this.files.length);
        this.fileDefNameList.forEach(element => {
          this.data[element.value].fileList.forEach(v => {
            this.files.push(v);
          });
        });
        this.sceneNameList.forEach(element => {
          this.data[element.value].fileList.forEach(v => {
            this.files.push(v);
          });
        });
      },
      getHistoryData() {
        this.dialogHistoryDataVisible = true;
        if (this.historyData.length == 0) {
          queryFiles(this.idCardInfo.idCard).then(res => {
            res.data.forEach(e => {
              e.url = this.downloadURL + e.fileId;
              e.selected = false;
              this.historyData.push(e);
            });
          });
        }
      },
      handleSelectHistoryData(e) {
        e.selected = !e.selected;
      },
      confirmHistoryData() {
        this.dialogHistoryDataVisible = false;
        this.historyData.forEach(e => {
          if (this.data[e.fileDefKey] && e.selected === true) {
            if (!this.containsFile(this.data[e.fileDefKey].fileList, e.fileId)) {
              this.data[e.fileDefKey].fileList.push(e);
            }
          }
        });
      },
      containsFile(list, id) {
        let result = false;
        list.forEach(e => {
          if (e.fileId === id) {
            result = true;
            return result;
          }
        });
        return result;
      },
      resetFileTemp() {
        this.fileTemp = {
          fileDefKey: null, //资料的key
          fileDefName: null, //资料类型名称
          fileName: null, // 在业务中的文件名
          fileId: null //文件存储ID
        };
      },
      resetFiles() {
        this.fileDefNameList.forEach(f => {
          this.data[f.value].fileList = [];
        });
        this.sceneNameList.forEach(s => {
          this.data[s.value].fileList = [];
        });
      }
    }
  };
</script>
<style scoped>
  .dialog-footer {
    margin-top: 5px;
    margin-left: 25px;
    display: flex;
    justify-content: flex-end;
    padding-right: 25px;
  }

  .dialogBox-header {
    height: 50px;
    line-height: 50px;
    border-bottom: 1px solid #e5e5e5;
    color: #676a6c;
    font-size: 18px;
    padding-left: 25px;
    overflow: hidden;
  }

  .dialogBox-Main {
    background-color: #fff;
    border-radius: 5px;
    overflow: hidden;
    background-color: #fff;
  }

  .dialogBox {
    display: flex;
    align-items: center;
    justify-content: center;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.1);
    z-index: 2003;
    overflow: hidden;
  }

  .upload-list-itemBotTime {
    width: 180px;
    overflow: hidden;
    height: 14px;
    line-height: 14px;
    font-size: 14px;
    overflow: hidden;
    color: #fff;
    margin-left: 10px;
    margin-top: -3px;
  }

  .upload-list-itemBotName {
    margin-left: 10px;
    margin-top: 9px;
    width: 180px;
    overflow: hidden;
    height: 14px;
    line-height: 14px;
    font-size: 14px;
    overflow: hidden;
    color: #fff;
  }

  .upload-listUL {
    display: flex;
    flex-wrap: wrap;
  }

  .upload-list-add {
    width: 150px;
    height: 150px;
    border-radius: 6px;
    border: 1px dashed #1890ff;
    cursor: pointer;
    color: #1890ff;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 80px;
    margin-bottom: 20px;
  }

  .upload-list-itemImg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
  }

  .upload-list-itemBot {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 50px;
    background: rgba(0, 0, 0, 0.3);
    display: flex;
    flex-wrap: wrap;
    border: 0;
  }

  .upload-list-itemDel .el-icon-success {
    font-size: 28px;
    color: #fff;
  }

  .upload-list-itemDel .el-icon-successfalse {
    color: #409eff !important;
  }

  .upload-list-itemDel {
    position: absolute;
    top: 0;
    right: 0;
    width: 40px;
    height: 40px;
    background: rgba(103, 194, 153, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    border: 0;
  }

  .upload-list-item {
    width: 250px;
    height: 150px;
    margin-right: 40px;
    margin-bottom: 20px;
    position: relative;
    border-radius: 4px;
    overflow: hidden;
    border: 1px solid rgba(0, 0, 0, 0.4);
  }

  .upload-list-item-sub {
    width: 120;
    height: 100px;
    margin-right: 10px;
    margin-bottom: 2px;
    position: relative;
    border-radius: 4px;
    overflow: hidden;
    border: 1px solid rgba(0, 0, 0, 0.4);
  }

  .upload-list {
    border: 0;
  }

  .el-radio-itemBt {
    padding-left: 15px;
    border-radius: 5px !important;
    margin-bottom: 10px;
  }

  .el-radio-button:first-child .el-radio-button__inner {
    border-radius: 5px !important;
  }

  .el-card-header {
    font-size: 20px !important;
    color: #3ba4f5 !important;
    padding-left: 20px;
  }

  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }

  .avatar-uploader .el-upload:hover {
    border-color: #409eff;
  }

  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 98px;
    height: 98px;
    line-height: 98px;
    text-align: center;
  }

  .avatar {
    width: 98px;
    height: 98px;
    display: block;
  }

  .members::before {
    content: "*";
    color: #f56c6c;
    margin-right: 4px;
  }

  .ElectronicData {
    overflow: hidden;
    margin-bottom: 20px;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  }
</style>